<template>
  <div class="row">
    <component
      :is="element"
      class="input"
      :class="inputClass"
      :type="type"
      :name="name"
      :value.prop="text"
      :placeholder="placeholder"
      @input="update"
      v-bind="$attrs"
    />
  </div>
</template>

<script>
/**
 * 我 们 在 v-bind:value 指 令 中 使 用 prop 修 饰 符 来 告 诉 Vue 直 接 设 置 DOM 节 点 value 属 性，
 * 而 不 是 设 置 HTML 属 性。 在 处 理 输 入 框 HTML 元 素 的 属 性（ 如 value ）时， 这 是 一 个 很 好 的 实 践。
 */

export default {
  props: {
    name: {
      type: String
    },
    type: {
      type: String,
      default: "text"
    },
    text: {
      required: true
    },
    placeholder: {
      type: String,
      default: "请输入"
    },
    invalid: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: "text",
    event: "update"
  },
  computed: {
    // 修改输入框的样式
    inputClass() {
      return {
        invalid: this.invalid
      };
    },
    element() {
      return this.type === "textarea" ? this.type : "input";
    }
  },
  methods: {
    update(e) {
      this.$emit("update", e.currentTarget.value);
    }
  }
};
</script>

<style lang="stylus" scoped>
.input
  &.invalid
    border-color red
</style>